<template>
    <div class="all">
        <div class="searchout">
            <div class="searchs">
                <div class="ipts">
                    <div class="ipt">
                        <el-input
                            placeholder="请输入技师名字"
                            v-model="one.input"
                            clearable
                        >
                        </el-input>
                    </div>
                    <div class="sel sel-1">
                        <el-select
                            v-model="one.value_1"
                            placeholder="请选择擅长项目"
                        >
                            <el-option
                                v-for="item in serveType"
                                :key="item.id"
                                :label="item.gproject"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="sel sel-2">
                        <el-select
                            v-model="one.value_2"
                            placeholder="请选择状态"
                        >
                            <el-option
                                v-for="item in state"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="btn" @click="selectOne">
                        <el-button type="primary" icon="el-icon-search"
                            >搜索</el-button
                        >
                    </div>
                </div>
            </div>
        </div>
        <!-- -----------------技师列表--------------------- -->
        <div class="list">
            <div>
                <div class="femal">
                    <div class="left"><span class="word">女技师</span></div>
                    <div class="right">
                        <div
                            class="tecs"
                            v-for="item in femaleData"
                            :key="item.technician_id"
                        >
                            <img
                                style="width: 64px"
                                src="../../assets/tec.jpg"
                                alt=""
                            />
                            <span class="tecname">{{
                                item.technician_name
                            }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="femal">
                    <div class="left"><span class="word">男技师</span></div>
                    <div class="right">
                        <div
                            class="tecs"
                            v-for="item in manData"
                            :key="item.technician_id"
                        >
                            <img
                                style="width: 64px"
                                src="../../assets/nan1.jpg"
                                alt=""
                            />
                            <span class="tecname">{{
                                item.technician_name
                            }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div><div class="man">男技师</div></div> -->
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("technician");
export default {
    data() {
        return {
            one: {
                input: "",
                value_1: "",
                value_2: "",
            },
            ddd: {
                technician_name: "",
                id: "",
                technician_state: "",
            },

            state: [
                { value: "0", label: "未上工" },
                { value: "1", label: "上工" },
                { value: "2", label: "预约" },
                { value: "3", label: "请假" },
            ],
        };
    },
    mounted() {
        this.selectAll();
        this.findAll();
    },
    computed: {
        ...mapState(["serveType", "workingData", "femaleData", "manData"]),
    },
    methods: {
        ...mapActions(["selectAll", "findAll", "serviceTechnicianState"]),
        selectOne() {
            console.log(this.one);
            this.ddd.technician_name = this.one.input;
            this.ddd.id = this.one.value_1;
            this.ddd.technician_state = this.one.value_2;
            this.serviceTechnicianState(this.ddd);
            // console.log("result", result.data);
            // this.femaleData = result.data.filter(
            //     (item) => item.technician_gender == "女"
            // );
            // console.log(this.femaleData);
        },
    },

    // data:{technician_name,id,technician_state}
};
</script>

<style scoped lang='scss'>
* {
    text-align: start;
    box-sizing: border-box;
}

.all {
    height: 600px;
    width: 100%;
    margin: 0 auto;
    // background-color: blueviolet;
}
.searchout {
    width: 100%;
    height: 67px;
    padding-top: 5px;
    background-color: rgb(239, 242, 246);
    .searchs {
        // display: flex;
        // justify-content: space-around;
        margin-top: 10px;
        overflow: hidden;
        width: 100%;

        .ipts {
            width: 90%;
            margin: 0 auto;
            .ipt {
                width: 160px;
                float: left;
                margin-right: 20px;
            }
            .sel {
                width: 240px;
                float: left;
                margin-left: 20px;
            }
            .btn {
                margin-left: 30px;
                float: left;
                width: 80px;
            }
        }
    }
}

.list {
    height: 450px;
    width: 95%;
    margin: 0 auto;
    // border: 1px solid;
    margin-top: 30px;
    .femal {
        height: 220px;
        // background-color: rgb(92, 110, 211);
        overflow: hidden;
        .left {
            float: left;
            width: 65px;
            height: 100%;
            background-color: #fff;
            .word {
                display: block;
                height: 100px;
                width: 65px;
                line-height: 100px;
                text-align: center;
            }
        }
        .right {
            margin-top: 14px;
            float: left;
            width: 880px;
            height: 200px;
            display: flex;
            // justify-content: space-around;
            flex-wrap: wrap;
            flex-direction: row;
            // overflow: hidden;
            .tecs {
                width: 64px;
                height: 64px;
                // border: 1px solid red;
                border-radius: 3px;
                // float: left;
                margin-right: 10px;
                position: relative;
                overflow: hidden;
                .tecname {
                    border-bottom-right-radius: 3px;
                    border-bottom-left-radius: 3px;
                    display: inline-block;
                    height: 20px;
                    line-height: 20px;
                    width: 64px;
                    text-align: center;
                    background-color: rgb(240, 123, 168);
                    color: #fff;
                    // margin-top: -30px;
                    top: 44px;
                    left: 0px;
                    z-index: 30;
                    position: absolute;
                }
            }
        }
    }
    .man {
        height: 50%;
        background-color: chocolate;
    }
}
</style>